<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开发者彩蛋</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Courier New', monospace;
            background-color: #000;
            color: #0f0;
            overflow-x: hidden;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        #matrix {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
        
        .container {
            max-width: 800px;
            width: 100%;
            background-color: rgba(0, 20, 0, 0.7);
            border: 1px solid #0f0;
            border-radius: 5px;
            padding: 30px;
            box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
            margin: 20px 0;
            position: relative;
            overflow: visible;
        }
        
        h1 {
            text-align: center;
            margin-bottom: 25px;
            font-size: 2.2em;
            text-shadow: 0 0 10px #0f0;
            letter-spacing: 2px;
        }
        
        .team {
            text-align: center;
            margin-bottom: 25px;
            line-height: 1.6;
            font-size: 1.1em;
        }
        
        .highlight {
            background-color: rgba(0, 40, 0, 0.5);
            padding: 20px;
            border-left: 3px solid #0f0;
            margin: 25px 0;
        }
        
        .highlight p {
            margin: 8px 0;
        }
        
        .date {
            text-align: right;
            font-weight: bold;
            color: #0f0;
        }
        
        .message-box {
            background-color: rgba(0, 30, 0, 0.5);
            padding: 20px;
            border: 1px dashed #0f0;
            margin: 25px 0;
            border-radius: 3px;
        }
        
        .message-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #0f0;
        }
        
        .wishes {
            margin-top: 25px;
            line-height: 1.8;
        }
        
        .wishes-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #0f0;
        }
        
        .footer {
            margin-top: 30px;
            text-align: center;
            font-size: 0.9em;
            color: #0a0;
        }
        
        /* 响应式设计 */
        @media (max-height: 800px) {
            .container {
                padding: 20px;
            }
            
            h1 {
                font-size: 1.8em;
                margin-bottom: 15px;
            }
            
            .team, .highlight, .message-box, .wishes {
                margin: 15px 0;
            }
        }
        
        @media (max-width: 600px) {
            .container {
                padding: 15px;
            }
            
            h1 {
                font-size: 1.6em;
            }
            
            body {
                padding: 10px;
            }
        }
        
        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: rgba(0, 30, 0, 0.3);
        }
        
        ::-webkit-scrollbar-thumb {
            background: #0a0;
            border-radius: 4px;
        }
        
        /* 闪烁光标效果 */
        .cursor {
            display: inline-block;
            width: 8px;
            height: 1.2em;
            background-color: #0f0;
            margin-left: 2px;
            animation: blink 1s infinite;
            vertical-align: middle;
        }
        
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }
    </style>
</head>
<body>
    <canvas id="matrix"></canvas>
    
    <div class="container">
        <h1>开发者彩蛋</h1>
        
        <p class="team">本项目：<br/>曹惠宁、杜梓沫、杨雨昔、宋金乔、张墨涵、李雨桐主导策划设计<br/>  刘晓雨负责网站开发 <br/>共同创作</p>
        
        <div class="highlight">
            <p>年少的梦，未曾放手<br/>
	允许一切风雨，纵情燃烧<br/>
	光明穿破乌云，击碎一切黑暗<br/></p>
            <p class="date">开发日期：2025年10月25日</p>
        </div>
        
        <div class="message-box">
            <div class="message-title">《坤河速写 - 打开一本书》<br/>作者：黑河市作家协会-高振杰老师</div>
            <p>乡村是书籍，山水是散发墨香的</p>
<p>唐诗宋词。而我只是一个符号</p>
<p>一只飞鸟，一棵庄稼</p>
<br/>
<p><p>生于书，长于书，吸收书的供养</p>
眼界开阔，羽翼渐丰</p>
<p>从一本书到另一本书</p>
<p>——坤河。我只是一个过客</p>
<br/>
<p>一些入眼入心的章节,像首次看露天电影</p>
<p>看偶像演唱会，似被谁</p>
<p>推开初恋的门,怦然心动</p>
        </div>
        
        <div class="wishes">
            <div class="wishes-title">致所有程序员：</div>
            <p>愿你们的代码少些bug，多些优雅</p>
            <p>愿你们的项目顺利上线，用户满意</p>
            <p>愿你们在编程的道路上不断成长，保持热爱</p>
            <p>Happy Coding!<span class="cursor"></span></p>
        </div>
        
        <div class="footer">
            <p>感谢访问 | 2025</p>
	<p>曹惠宁 杜梓沫 杨雨昔 刘晓雨 宋金乔 张墨涵 李雨桐 作品 © 2025</p>
	<p>黑河学院经济管理学院、文化旅游学院、计算机与信息工程学院 软件项目开发社团 版权所有</p>
        </div>
    </div>

    <script>
        // 代码雨效果
        const canvas = document.getElementById('matrix');
        const ctx = canvas.getContext('2d');
        
        // 设置画布大小为窗口大小
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        
        // 字符集
        const chars = "01刘晓雨曹惠宁杜梓沫杨雨昔宋金乔张墨涵李雨桐HTMLCSSJS20251025";
        const fontSize = 16;
        const columns = Math.floor(canvas.width / fontSize);
        
        // 创建雨滴数组
        const drops = [];
        for (let i = 0; i < columns; i++) {
            drops[i] = Math.floor(Math.random() * canvas.height / fontSize);
        }
        
        // 绘制函数
        function draw() {
            // 半透明黑色背景，形成拖尾效果
            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            ctx.fillStyle = '#0f0';
            ctx.font = `${fontSize}px monospace`;
            
            for (let i = 0; i < drops.length; i++) {
                // 随机选择字符
                const text = chars.charAt(Math.floor(Math.random() * chars.length));
                
                // 绘制字符
                ctx.fillText(text, i * fontSize, drops[i] * fontSize);
                
                // 如果雨滴超出画布底部，重置到顶部
                if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
                    drops[i] = 0;
                }
                
                drops[i]++;
            }
        }
        
        // 调整窗口大小时重置画布
        window.addEventListener('resize', function() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });
        
        // 每33毫秒重绘一次（约30fps）
        setInterval(draw, 33);
        
        // 确保内容完全可见
        function adjustLayout() {
            const container = document.querySelector('.container');
            const windowHeight = window.innerHeight;
            const containerHeight = container.offsetHeight;
            
            if (containerHeight > windowHeight - 40) {
                container.style.marginTop = '20px';
                container.style.marginBottom = '20px';
            } else {
                container.style.marginTop = 'auto';
                container.style.marginBottom = 'auto';
            }
        }
        
        // 初始调整和窗口大小变化时调整
        window.addEventListener('load', adjustLayout);
        window.addEventListener('resize', adjustLayout);
    </script>
</body>
</html>